<template>
  <div class="box">
    <NavBar
      @goBack="goBack"
      :title="title"
    ></NavBar>
    <div class="login">
      <h1>LOGIN</h1>

      <!-- 输入手机号，调起手机号键盘 -->
      <van-field
        v-model="tel"
        type="tel"
        label
        placeholder="Please input account"
      />

      <!-- 输入密码 -->
      <van-field
        v-if="isOpen"
        v-model="password"
        type="text"
        label
        placeholder="Please input password"
        :right-icon="passwordIcon"
        @click-right-icon="switchs"
      />
      <van-field
        v-if="!isOpen"
        v-model="password"
        type="password"
        label
        placeholder="Please input password"
        :right-icon="passwordCloseIcon"
        @click-right-icon="switchs"
      />

      <div class="menuSelect">
        <span
          @click="forgotPass"
          class="forgotPass"
        >Forgot Password?</span>
      </div>

      <van-button
        v-if="buttonType"
        type="info"
        size="large"
        @click="login"
      >Login</van-button>
      <van-button
        v-if="!buttonType"
        type="primary"
        size="large"
        @click="login"
      >Login</van-button>
      <div
        class="registerBtn"
        @click="register"
      >Register</div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
// https://www.jianshu.com/p/ce8e19b24e90
import NavBar from '@/components/NavBar'
import { Login, validata } from '@/model/loginInstance'
import LocalStorage from '../../model/localStorage'
import { toLogin } from 'api/user.js'
import { Toast } from 'vant'
export default {
  name: 'Login',
  components: {
    NavBar
  },
  data() {
    return {
      passwordCloseIcon: require('assets/image/icon_no_eye.png'),
      passwordIcon: require('assets/image/icon_eye.png'),
      isOpen: false,
      buttonType: false,
      title: '',
      tel: '',
      password: ''
    }
  },
  watch: {
    tel: function(newValue, oldValue) {
      this.tel = newValue.replace(/[^0-9]/g, '')
    },
    password: function(newValue, oldValue) {
      this.password = newValue.replace(/\s+/g, '')
      this.buttonType = true
    }
  },
  mounted() {
    // console.log(login)
  },
  methods: {
    goBack() {
      // alert('h52webview')
    },
    login() {
      // console.log(login)
      // this.$router.replace({
      //   path: '/main'
      // })
      const login = new Login(this.tel, this.password)

      // console.log(login)

      if (validata(login, Login)) {
        // alert('登陆')
        // console.log('22')
        let data = login._getData()
        toLogin(data)
          .then(res => {
            // console.log(res)
            const { loginToken, phone, consumerId,consumerName, consumerNumber } = res.data.user
            const realToken = phone + '-' + loginToken
            this.$store.dispatch('setToken', realToken)
            this.$store.dispatch('setUserInfo', JSON.stringify({ phone, consumerId,consumerName, consumerNumber }))
            LocalStorage.set('token', realToken)
            // console.log('userInfo', this.$store.state.app.userInfo)
            this.$router.replace({
              path: '/main'
            })
            Toast.success({
              message: res.message
            })
          })
          .catch(err => {
            Toast.fail({
              message: err
            })
          })
      }

      //   localStorage.setItem('token', '123456')

      //   this.$router.replace({
      //     path: '/onlineOrder'
      //   })
    },
    register() {
      //   alert('注册')

      this.$router.push({
        path: '/register'
      })
    },
    forgotPass() {
      // this.$router.push({
      //   path: '/password'
      // })

      this.$router.push({
        // path: '/addressBook'
        name: 'password',
        params: { id: 1 }
      })
    },
    switchs() {
      //   alert('55')
      this.isOpen = !this.isOpen
    }
  }
}
</script>
<style lang="scss" scoped>
@import 'assets/css/login/login.scss';
</style>
